<style>
    #dhh-add-app {
        overflow: auto;
    }
    
    .input-box {
        height: 30px;
        float: left;
        width: 100%;
        margin-top: 30px;
        margin-left: 30px;
    }
    
    .input-line-1 {
        height: 30px;
        display: inline-block;
        float: left;
        margin-bottom: 5px;
    }
    
    .input-line-1 label {
        height: 30px;
        width: 30%;
        float: left;
        line-height: 30px;
        -text-indent: 10px;
        text-align: right;
        padding-right: 2%;
    }
    
    .input-line-1 input,
    .input-line-1 select {
        height: 30px;
        width: 60%;
        float: left;
        border: solid 1px lightgray;
        text-indent: 15px;
    }
</style>
<div id="dhh-add-app" class="show_page_content">

    <div class="input-box">
        <div class="input-line-1 auto_25">
            <label for=""><span style="color:indianred">*</span>APP标题：</label>
            <input type="text" placeholder="请输入APP标题" class="app_title1 val" field="title" index="0" maxlength="10">
        </div>
        <span id=""></span>
    </div>
    <div class="input-box">
        <div class="input-line-1 auto_25">
            <label for=""><span style="color:indianred">*</span>APP简介：</label>
            <input type="text" placeholder="请输入APP简介" class="app_title2 val" field="title2" index="1" maxlength="20">
        </div>
        <span id=""></span>
    </div>
    <div class="input-box">
        <div class="input-line-1 auto_25">
            <label for="">额度范围(元)：</label>
            <input type="text" placeholder="请输入额度范围" class="app_num val" field="money" rexg="(^[0-9]+\-[0-9]+$)|(^[0-9]+\-[0-9]+w$)/" msg="格式不正确！，0000-0000或0000-1w" rexIndex="0">
        </div>
        <span id=""></span>
    </div>
    <!-- <div class="input-box">
        <div class="input-line-1 auto_25">
            <label for=" ">最高额度(元)：</label>
            <input type="text " placeholder="请输入最高额度" class="app_num val" field="maxmoney" rexg="^[0-9]+\.?[0-9]+$" msg="格式不正确，整数或小数！" rexIndex="1">
        </div>
        <span id=""></span>
    </div> -->
    <div class="input-box">
        <div class="input-line-1 auto_25">
            <label for=" ">日费率(小数后两位)：</label>
            <input type="text " placeholder="请输入低费率" class="app_num val" field="minfeilv" rexg="^[0-9]+\.?[0-9]{0,2}$" msg="格式不正确，整数或小数后两位！" rexIndex="2">
            &nbsp;&nbsp;%
        </div>
        <span id=""></span>
    </div>
    <div class="input-box">
        <div class="input-line-1 auto_25">
            <label for=" ">贷款期限：</label>
            <input type="text " placeholder="请输入贷款期限" class="app_num val" field="yunjiage" rexg="^[0-9]+\.?[0-9]*$" msg="格式不正确，整数或小数！" rexIndex="3">
        </div>
        <span id=""></span>
    </div>
    <!-- <div class="input-box">
        <div class="input-line-1 auto_25">
            <label for=" ">最长期限(天)：</label>
            <input type="text " placeholder="请输入最长期限(天)" class="app_num val" field="maxdate" rexg="^[0-9]+\.?[0-9]*$" msg="格式不正确，整数或小数！" rexIndex="4">
        </div>
        <span id=""></span>
    </div> -->
    <div class="input-box">
        <div class="input-line-1 auto_25">
            <label for=" ">参与人数：</label>
            <input type="text " placeholder="请输入参与人数" class="app_num val" field="zongrenshu" rexg="^[0-9]+$" msg="格式不正确，必须为整数！" rexIndex="5">
        </div>
        <span id=""></span>
    </div>
    <div class="input-box">
        <div class="input-line-1 auto_40">
            <label for=" " style="width:18%;"><span style="color:indianred">*</span>缩略图：</label>
            <img src="" id="show_img" style="height:30px;width:auto;float: left;margin-right: 1%;">
            <input type="file" id="hiddent-file" style="display:none;">
            <input type="text " placeholder="请选择图片" class="app_img" readonly style="width:40%">
        </div>
        <span id=""></span>
    </div>
    <div class="input-box">
        <div class="input-line auto_25">
            <label for="">开始时间:</label>
            <input type="text" placeholder="请输入开始时间" class="stime val" field="on_shell_time">
        </div>
    </div>
    <div class="input-box">
        <div class="input-line auto_25">
            <label for="">结束时间:</label>
            <input type="text" placeholder="请输入结束时间" class="etime val" field="off_shell_time">
        </div>
    </div>
    <div class="input-box">
        <div class="input-line-1 auto_25 ">
            <label for=" ">链接：</label>
            <input type="text " placeholder="请输入链接" class="app_url val" field="content" rexg="^(?=^.{3,255}$)(http(s)?:\/\/)?(www\.)?[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+(:\d+)*(\/\w+\.\w+)*$" msg="格式不正确" rexIndex="6">
        </div>
        <span id=""></span>
    </div>
    <div class="input-box">
        <div class="input-line-1 auto_25 ">
            <label for=" ">每日uv量：</label>
            <input type="text " placeholder="请输入每日uv量" field="uv_day" class="app_num val" rexg="^[0-9]+$" msg="格式不正确，必须为整数！" rexIndex="7">
        </div>
        <span id=""></span>
    </div>
    <div class="input-box">
        <div class="input-line-1 auto_25 ">
            <label for=" ">产品单价：</label>
            <input type="text " placeholder="请输入产品单价" field="price" class="app_num val" rexg="^[0-9]+\.?[0-9]*$" msg="格式不正确，整数或小数！" rexIndex="8">
        </div>
        <span id=""></span>
    </div>
    <div class="input-box">
        <div class="input-line-1 auto_25 ">
            <label for=" ">是否为马甲包：</label>
            <select type="text " id="channel_name" class="val" field="is_mj">
                <option value="0">正式包</option>
                <option value="1">马甲包</option>
            </select>
        </div>
    </div>
    <div class="layui-btn input-line-1" id="app_add_btn" style="margin-top:20px;margin-bottom: 30px;margin-left: 30px;"><i class="layui-icon layui-icon-add-circle-fine"></i>添加</div>
</div>
<script>
    function zero(m) {
        return m < 10 ? "0" + m : m;
    }

    function laydateOPtion(ele, fn) {
        return {
            elem: ele, //需显示日期的元素选择器
            event: 'click', //触发事件
            type: "date",
            istime: false, //是否开启时间选择
            isclear: true, //是否显示清空
            istoday: true, //是否显示今天
            issure: true, //是否显示确认
            festival: true, //是否显示节日
            lang: "zh-CN",
            fixed: false, //是否固定在可视区域
            zIndex: 99999999, //css z-index
            btns: ['confirm'],
            done: fn,
        }
    }
    layui.use(["laydate"], function() {
        layui.laydate.render(laydateOPtion("#dhh-add-app .stime",
            function(value, date, endDate) {
                var eDateStr = $("#dhh-add-app .etime").val();
                var sDateStr = value;
                if (sDateStr && eDateStr) {
                    var startDateTime = new Date(sDateStr).getTime();
                    var endDateTime = new Date(eDateStr).getTime();
                    if (endDateTime <= startDateTime) {
                        layer.msg("开始时间不能大于等于结束时间!", {
                            time: 3000,
                            icon: 0
                        });
                        var ele = this.elem[0];
                        setTimeout(function() {
                            ele.value = "";
                        }, 400);

                    } else {

                    }
                }

            }));
        layui.laydate.render(laydateOPtion("#dhh-add-app .etime",
            function(value, date, endDate) {
                var eDateStr = value;
                var sDateStr = $("#dhh-add-app .stime").val();
                if (sDateStr && eDateStr) {
                    var startDateTime = new Date(sDateStr).getTime();
                    var endDateTime = new Date(eDateStr).getTime();
                    if (endDateTime <= startDateTime) {
                        layer.msg("结束时间不能小于等于结束时间!", {
                            time: 3000,
                            icon: 0
                        });
                        var ele = this.elem[0];
                        setTimeout(function() {
                            ele.value = "";
                        }, 400);

                    } else {

                    }
                }

            }));
    })


    function GetLength1(str) {
        var realLength = 0;
        for (var i = 0; i < str.length; i++) {
            charCode = str.charCodeAt(i);
            if (charCode >= 0 && charCode <= 128)
                realLength += 1;
            else
                realLength += 2;
        }
        return realLength;
    }
    var rex = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
    $(".app_title1").on("input", function() {
        var v = GetLength1(this.value);
        $(this).parent().next().html("<span style='color:indianred'>还能输入" + (10 - v) + "个字符</span>");
    });
    $(".app_title2").on("input", function() {
        var v = GetLength1(this.value);
        $(this).parent().next().html("<span style='color:indianred'>还能输入" + (20 - v) + "个字符</span>");
    });
    $(".app_num").on("input", function() {
        if (new RegExp($(this).attr("rexg")).test($(this).val()) || $(this).val() == "") {
            $(this).parent().next().html("");
            $(this).css("border", "solid 1px lightgray");
            rex[Number($(this).attr("rexIndex"))] = 0;
        } else {
            $(this).parent().next().html("<span style='color:indianred'>" + $(this).attr("msg") + "</span>");
            $(this).css("border", "solid 1px indianred");
            rex[Number($(this).attr("rexIndex"))] = 1;
        }
    });
    $(".app_url").on("focus", function() {
        $(this).parent().next().html("");
        $(this).css("border", "solid 1px lightgray");

        rex[Number($(this).attr("rexIndex"))] = 0;
    });
    $(".app_url").on("blur", function() {
        if ($(this).val() != "") {
            if (!new RegExp($(this).attr("rexg")).test($(this).val())) {
                $(this).parent().next().html("<span style='color:indianred'>" + $(this).attr("msg") + "</span>");
                $(this).css("border", "solid 1px indianred");
                rex[Number($(this).attr("rexIndex"))] = 1;
            } else {
                rex[Number($(this).attr("rexIndex"))] = 0;

            }
        }

    });
    $(".app_url").on("input", function() {
        $(this).parent().next().html("");
        $(this).css("border", "solid 1px lightgray");


    });
    var URL = window.URL || window.webkitURL;

    $(".app_img").on("click", function() {
        $("#hiddent-file").click();
    });
    $("#hiddent-file").on("change", function() {
        var videoUrl = URL.createObjectURL(this.files[0]);
        $(".app_img").val(videoUrl);
        $("#show_img").attr("src", videoUrl);
    });
    $("#app_add_btn").on("click", function() {
        var y = 0;
        for (var i = 0; i < rex.length; i++) {
            y += rex[i];
        }
        if ($(".app_title1").val() == "") {
            layer.msg("APP标题为必填项！");
        } else if ($(".app_title2").val() == "") {
            layer.msg("APP简介为必填项！");
        } else if ($(".app_img").val() == "") {
            layer.msg("APPlogo为必填选择！");
        } else {
            if (y == 0) {
                var fdata = new FormData();
                for (var i = 0; i < $(".val").length; i++) {
                    if ($(".val").eq(i).val() != "") {
                        fdata.append($(".val").eq(i).attr("field"), $(".val").eq(i).val());
                    }
                }
                fdata.append("logo", $("#hiddent-file")[0].files[0]);
                $.ajax({
                    url: "/app/app_add",
                    type: "post",
                    data: fdata,
                    dataType: "json",
                    processData: false,
                    contentType: false,
                    beforeSend: function() {
                        loadIndex = layer.load(0);
                    },
                    success: function(d) {
                        layer.close(loadIndex);
                        if (d.result == "1") {
                            layer.msg("添加成功！", {
                                icon: 1,
                                time: 2000
                            });
                        } else {
                            layer.msg("添加失败！", {
                                icon: 1,
                                time: 2000
                            });
                        }
                    },
                    error: function() {
                        layer.msg("网络异常失败！", {
                            icon: 1,
                            time: 2000
                        });
                    }
                });
            }

        }
    });
</script>